<template>
  <div class="loading" v-if="showLoading">
    <img src="@imgs/loadingLogo.png" alt="" />
    <div class="loadingText">{{ loadingText + '...' }}</div>
    <div class="loading-dots">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'loading',
  props: {
    showLoading: {
      type: Boolean,
      default: false
    },
    loadingText: {
      type: String,
      default: '加载中'
    }
  },
  data() {
    return {}
  },
  watch: {},
  created() {}
}
</script>

<style lang="less" scoped>
.loading {
  z-index: 999999;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(211, 234, 255, 0.9);
  font-size: 20px;
  text-align: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  color: #000;
  img {
    display: inline-block;
    width: 40vw;
    height: 40vw;
  }
  .loading-dots {
    width: 100px;
    height: 50px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  span {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 5px;
    animation-name: loading-beat;
    /* 动画完成一个周期所需要的时间 */
    animation-duration: 1.2s;
    /* 定义动画从何时开始（延迟） */
    animation-delay: 0s;
    /* 动画播放次数（无限） */
    animation-iteration-count: infinite;
  }

  span:nth-child(1) {
    background: #0c5194;
  }
  span:nth-child(2) {
    background: #0c5194;
    animation-delay: 0.2s;
  }
  span:nth-child(3) {
    background: #0c5194;
    animation-delay: 0.4s;
  }
  span:nth-child(4) {
    background: #0c5194;
    animation-delay: 0.6s;
  }

  @keyframes loading-beat {
    0% {
      transform: translateY(0) scale(1);
    }
    25% {
      transform: translateY(-8px) scale(1.5);
    }
    50%,
    75%,
    100% {
      transform: translateY(0px) scale(1);
    }
  }
}
</style>
